{% extends 'AdminBundle:base:index.html.twig' %}
    {% block breadcrumbs %}
        {% embed "AdminBundle:base:breadcrumbs.html.twig" %}
            {% block breadcrumb %}
                <li class="active">作业</li>
                <li><a href="{{ path('taskjobs_new') }}">新建</a></li>

            {% endblock %}
        {% endembed %}
    {% endblock %}

    {% block content %}
        <div class="row">
            <div class="widget-box">
                <div class="widget-header widget-header-small">
                    <h5 class="widget-title lighter">Search Form</h5>
                </div>

                <div class="widget-body">
                    <div class="widget-main">

                        <form class="form-search">
                            <div class="row">
                                <div class="col-xs-2">
                                    <div class="input-group">
																	<span class="input-group-addon">
																		<i class="fa fa-calendar bigger-110"></i>
																	</span>

                                        <input class="form-control" type="text" name="date_range"
                                               id="id-date-range-picker-1"
                                               value="{{ starttime |date('m/d/Y') }} - {{ endtime|date('m/d/Y') }}"/>
                                    </div>
                                </div>

                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <select name="device_group" placeholder="请选择终端组"
                                                class="chosen-select form-control">
                                            <option value="">请选择终端组</option>
                                            {% for baseGroup in baseGroups %}
                                                <option value="{{ baseGroup.id }}" {% if baseGroup.id == device_group %} selected {% endif %}>{{ baseGroup.name }}
                                                    --{{ baseGroup.note }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xs-2">
                                    <div class="input-group">
                                    <span class="input-group-addon">
									    <i class="ace-icon fa fa-check"></i>
                                    </span>

                                        <input type="text" name="keyword" class="form-control search-query"
                                               placeholder="Type your query" value="{{ keyword }}"/>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <div class="input-group">
                                    <span class="input-group-btn">
									    <button type="submit" class="btn btn-purple btn-sm">
                                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                            Search
                                        </button>
									</span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="space-2"></div>
            <div class="hr hr-18 dotted hr-double"></div>

            <div class="col-sm-6">
                <div class="widget-box widget-color-blue2">
                    <div class="widget-header">
                        <h4 class="widget-title lighter smaller">Choose Categories</h4>
                    </div>

                    <div class="widget-body">

                        <table id="simple-table" class="table  table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>Actions</th>
                                <th>名称</th>
                                <th>时间表达式</th>
                                <th>起止日期</th>
                                <th>起止时间</th>
                                <th>类型</th>
                                <th>启用</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for dataSource in dataSources %}
                                <tr data-value='{"id":{{ dataSource.id }},"freqType":{{ dataSource.freqType }},"packageId":{{ dataSource.packageId }},"packageName":"{{ dataSource.name }}","groupId":{{ device_group }},"freqExpression":"{{ dataSource.freqExpression }}","activeStartDate":"{{ dataSource.activeStartDate }}","activeEndDate":"{{ dataSource.activeEndDate }}","activeStartTime":"{{ dataSource.activeStartTime }}","activeEndTime":"{{ dataSource.activeEndTime }}","isEnabled":"{{ dataSource.isEnabled }}" }'>
                                    <td>
                                        <div class="hidden-sm hidden-xs action-buttons">
                                            <a class="blue" href="#" title="view"
                                               data-value="{{ dataSource.packageId }}">
                                                <i class="ace-icon fa fa-search-plus bigger-130"></i>
                                            </a>

                                            <a class="green" href="#" title="edit"
                                               data-value='{"freqType":{{ dataSource.freqType }},"packageId":{{ dataSource.packageId }},"packageName":"{{ dataSource.name }}","groupId":{{ device_group }},"freqExpression":"{{ dataSource.freqExpression }}","activeStartDate":"{{ dataSource.activeStartDate }}","activeEndDate":"{{ dataSource.activeEndDate }}","activeStartTime":"{{ dataSource.activeStartTime }}","activeEndTime":"{{ dataSource.activeEndTime }}","isEnabled":"{{ dataSource.isEnabled }}" }'>
                                                <i class="ace-icon fa fa-pencil bigger-130"></i>
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <a class="blue" href="{{ path('taskjobs_show', { 'id': dataSource.id }) }}">{{ dataSource.name }}</a>
                                    </td>
                                    <td>{{ dataSource.freqExpression }}</td>
                                    <td>{{ dataSource.activeStartDate }} -- {{ dataSource.activeEndDate }}</td>
                                    <td>{{ dataSource.activeStartTime }} -- {{ dataSource.activeEndTime }}</td>
                                    <td>{% for key, value in freq_type if value == dataSource.freqType %} {{ key }} {% endfor %}</td>
                                    <td>{% if dataSource.isEnabled %}Yes{% else %}No{% endif %}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="col-sm-6">
                <!-- PAGE CONTENT BEGINS -->
                <div class="alert alert-info">
                    <button class="close" data-dismiss="alert">
                        <i class="ace-icon fa fa-times"></i>
                    </button>

                    <i class="ace-icon fa fa-hand-o-right"></i>
                    请注意,选择左侧的条目后,再继续编辑.
                </div>

                <table id="grid-table"></table>

                <div id="grid-pager"></div>

                <!-- PAGE CONTENT ENDS -->
            </div>
            <div class="col-sm-6">
                <div class="widget-box widget-color-green2">
                    <div class="widget-header">
                        <h4 class="widget-title lighter smaller">
                            Browse Files
                            <span class="smaller-80">(with selectable folders)</span>
                        </h4>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main padding-8">
                            <ul id="tree1"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialog-form" class="hide">
            <form name="dialog_pacakge" method="post" class="form-horizontal" role="form">
                <label for="packageName">任务包</label>

                <div class="input-group">
                    <input type="text" id="packageName" name="packageName" required="required" class="form-control"
                           readonly/>
                </div>
                <label for="freqType">类型</label>

                <div class="input-group">
                    <select id="freqType" name="freqType" required="required" class="form-control">
                        {% for k,v in freq_type %}
                            <option value="{{ v }}">{{ k }}</option>
                        {% endfor %}
                    </select>
                </div>

                <label for="activeStartDate">开始日期</label>
                <div class="input-group">
                    <input class="form-control date-picker" id="activeStartDate" type="text"
                           data-date-format="yyyy-mm-dd"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar bigger-110"></i>
                    </span>
                </div>

                <label for="activeEndDate">结束日期</label>
                <div class="input-group">
                    <input class="form-control date-picker" id="activeEndDate" type="text"
                           data-date-format="yyyy-mm-dd"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar bigger-110"></i>
                    </span>
                </div>

                <label for="activeStartTime">开始时间</label>
                <div class="input-group">
                    <input id="activeStartTime" name="activeStartTime" type="text"
                           class="form-control bootstrap-timepicker"/>
															<span class="input-group-addon">
																<i class="fa fa-clock-o bigger-110"></i>
															</span>
                </div>

                <label for="activeEndTime">结束时间</label>

                <div class="input-group">
                    <input id="activeEndTime" name="activeEndTime" type="text"
                           class="form-control bootstrap-timepicker"/>
															<span class="input-group-addon">
																<i class="fa fa-clock-o bigger-110"></i>
															</span>
                </div>

                <label for="freqExpression">时间表达式</label>

                <div class="input-group">
                    <input type="text" id="freqExpression" name="freqExpression" required="required"
                           class="form-control"/>
                </div>
                <div class="space-6"></div>

                <label for="isEnabled">启用</label>
                <div class="input-group">

                    <input type="checkbox" id="isEnabled"
                           name="isEnabled" class="ace ace-switch ace-switch-5"
                           value="1" checked="checked"/>
                    <span class="lbl"></span>
                </div>
            </form>
        </div><!-- #dialog-message -->

    {% endblock %}

    {% block head %}{{ parent() }}{% endblock %}
    {% block title %}作业{% endblock %}
    {% block description %}显示 作业{% endblock %}
    {% block plugin_styles %}
        <link rel="stylesheet" href="/admin/assets/css/ui.jqgrid.min.css"/>
        <link rel="stylesheet" href="/admin/assets/css/daterangepicker.min.css"/>
        <link rel="stylesheet" href="/admin/assets/css/bootstrap-datepicker3.min.css"/>
        <link rel="stylesheet" href="/admin/assets/css/bootstrap-timepicker.min.css"/>
        <link rel="stylesheet" href="/admin/assets/css/chosen.min.css"/>
        <link rel="stylesheet" href="/admin/assets/css/jquery-ui.min.css"/>
    {% endblock %}
    {% block css %}
        <style>
            .date-picker {
                z-index: 9999 !important;
            }
        </style>
    {% endblock %}

    {% block plugin_scripts %}
        <script src="/admin/assets/js/jquery.jqGrid.min.js"></script>
        <script src="/admin/assets/js/grid.locale-en.js"></script>
        <script src="/admin/assets/js/bootstrap-datepicker.min.js"></script>
        <script src="/admin/assets/js/bootstrap-timepicker.min.js"></script>
        <script src="/admin/assets/js/moment.min.js"></script>
        <script src="/admin/assets/js/daterangepicker.min.js"></script>
        <script src="/admin/assets/js/chosen.jquery.min.js"></script>
        <script src="/admin/assets/js/tree.min.js"></script>
        <script src="/admin/assets/js/jquery-ui.min.js"></script>

    {% endblock %}

    {% block javascripts %}
        <script type="text/javascript">
            jQuery(function ($) {
                        if (!ace.vars['touch']) {
                            $('.chosen-select').chosen({allow_single_deselect: true});
                            //resize the chosen on window resize

                            $(window)
                                    .off('resize.chosen')
                                    .on('resize.chosen', function () {
                                        $('.chosen-select').each(function () {
                                            var $this = $(this);
                                            $this.next().css({'width': $this.parent().width()});
                                        })
                                    }).trigger('resize.chosen');
                            //resize chosen on sidebar collapse/expand
                            $(document).on('settings.ace.chosen', function (e, event_name, event_val) {
                                if (event_name != 'sidebar_collapsed') return;
                                $('.chosen-select').each(function () {
                                    var $this = $(this);
                                    $this.next().css({'width': $this.parent().width()});
                                })
                            });
                        }
                        //datepicker plugin
                        //link
                        $('.date-picker').datepicker({
                                    autoclose: true,
                                    todayHighlight: true
                                })
                                //show datepicker when clicking on the icon
                                .next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });

                        $('.bootstrap-timepicker').timepicker({
                            minuteStep: 1,
                            showSeconds: true,
                            showMeridian: false,
                            disableFocus: true,
                            icons: {
                                up: 'fa fa-chevron-up',
                                down: 'fa fa-chevron-down'
                            }
                        }).on('focus', function () {
                            $(this).timepicker('showWidget');
                        }).next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });


                        //to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
                        $('input[name=date_range]').daterangepicker({
                            'applyClass': 'btn-sm btn-success',
                            'cancelClass': 'btn-sm btn-default',
                            locale: {
                                applyLabel: 'Apply',
                                cancelLabel: 'Cancel',
                            },
                            "showDropdowns": true,
                            "showWeekNumbers": true,
                            "timePicker24Hour": true,
                            "autoApply": true,
                            "alwaysShowCalendars": true,
//                "startDate": "06/29/2017",
//                "endDate": "07/05/2017"
                        }, function (start, end, label) {
                            console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
                        }).prev().on(ace.click_event, function () {
                                    $(this).next().focus();
                                }
                        );

                        //override dialog's title function to allow for HTML titles
                        $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
                            _title: function (title) {
                                var $title = this.options.title || '&nbsp;'
                                if (("title_html" in this.options) && this.options.title_html == true)
                                    title.html($title);
                                else title.text($title);
                            }
                        }));

                        $("a.green").on('click', function (e) {
                            var $this = $(this);
                            e.preventDefault();

                            packageData = $($this).closest('tr').data('value');

                            $('input#packageName').val(packageData.packageName);
                            $('input#activeStartDate').val(packageData.activeStartDate);
                            $('input#activeEndDate').val(packageData.activeEndDate);
                            $('input#activeStartTime').val(packageData.activeStartTime);
                            $('input#activeEndTime').val(packageData.activeEndTime);
                            $('input#freqExpression').val(packageData.freqExpression);
                            $('input#isEnabled').attr('checked', Boolean(Number(packageData.isEnabled)));
                            $('input#freqType').val(packageData.freqType);

                            var dialog = $("#dialog-form").removeClass('hide').dialog({
                                modal: true,
                                height: 640,
                                width: 400,
                                title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
                                title_html: true,
                                buttons: [
                                    {
                                        text: "Cancel",
                                        "class": "btn btn-minier",
                                        click: function () {
                                            $(this).dialog("close");
                                        }
                                    },
                                    {
                                        text: "OK",
                                        "class": "btn btn-primary btn-minier",
                                        click: function () {
                                            var $this = this;
                                            packageData.packageName = $('input#packageName').val();
                                            packageData.activeStartDate = $('input#activeStartDate').val();
                                            packageData.activeEndDate = $('input#activeEndDate').val();
                                            packageData.activeStartTime = $('input#activeStartTime').val();
                                            packageData.activeEndTime = $('input#activeEndTime').val();
                                            packageData.freqExpression = $('input#freqExpression').val();
                                            packageData.freqType = $('select#freqType').val();

                                            if ($("input#isEnabled").prop('checked'))
                                                packageData.isEnabled = $("input#isEnabled").attr('value');
                                            else
                                                packageData.isEnabled = "0";

                                            $.ajax({
                                                url: "{{ path('taskjobs_job') }}",
                                                type: "POST",
                                                dataType: 'json',
                                                data: packageData
                                            }).done(function (data, status, response) {
                                                packageData.id = data.id;
                                                console.log(data);
                                                $($this).dialog("close");
                                            }).fail(function (response, status, message) {
                                                console.log(message);
                                            });
                                        }
                                    }
                                ]
                            });

                            /**
                             dialog.data( "uiDialog" )._title = function(title) {
            title.html( this.options.title );
        };
                             **/
                        });

                        // jqgrid
                        var grid_selector = "#grid-table";
                        var pager_selector = "#grid-pager";
                        var grid_url = '{{ path("taskjobs_template",{"id":"-id-"}) }}';
                        var grid_url_edit = '{{ path("taskjobs_template_step_edit",{"id":"-id-"}) }}';

                        var packageData = {};

                        $("a.blue").button().on("click", function (event) {
                            event.preventDefault();

                            var $this = $(this);
                            var rowSelected = $($this).closest('tr');
                            packageData = rowSelected.data('value');
                            if (packageData.id == 0) {
                                $($this).next().click();
                                return;
                            }

                            console.log(jQuery(grid_selector).jqGrid('getGridParam'));

                            jQuery(grid_selector).jqGrid('setGridParam', {
                                url: grid_url.replace('-id-', packageData.id),
                                editurl: grid_url_edit.replace('-id-', packageData.id),
                                datatype: 'json',
                            }).trigger("reloadGrid").setCaption(packageData.packageName);
                            console.log('browser .')
                        });

                        var parent_column = $(grid_selector).closest('[class*="col-"]');
                        //resize to fit page size
                        $(window).on('resize.jqGrid', function () {
                            $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                        })

                        //resize on sidebar collapse/expand
                        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                                setTimeout(function () {
                                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                                }, 20);
                            }
                        });

                        jQuery(grid_selector).jqGrid({
                            //direction: "rtl",

                            //subgrid options
                            subGrid: false,

                            data: [],
                            datatype: "local",
                            height: 250,
                            colNames: [' ', '序号', '模板', '启用', '随机', '重复'],
                            colModel: [
                                {
                                    name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                                    formatter: 'actions',
                                    formatoptions: {
                                        keys: true,
                                        delbutton: false,//disable delete button
                                        delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
                                        editbutton: true,
//                                        editformbutton: false,
//                                        editOptions: {recreateForm: false, beforeShowForm: beforeEditCallback}
                                    }
                                },
                                {
                                    name: 'id',
                                    index: 'id',
                                    width: 60,
                                    sorttype: "int",
                                    sortable: false,
                                    editable: false,
                                    hidden: true
                                },
                                {
                                    name: 'name',
                                    index: 'name',
                                    width: 150,
                                    sortable: false,
                                    editable: true,
                                    editoptions: {size: "20", maxlength: "30"}
                                },
                                {
                                    name: 'isEnabled',
                                    index: 'isEnabled',
                                    width: 70,
                                    sortable: false,
                                    editable: true,
                                    edittype: "checkbox",
                                    editoptions: {value: "1:0"},
                                    unformat: aceSwitch
                                },
                                {
                                    name: 'isRand',
                                    index: 'isRand',
                                    width: 70,
                                    sortable: false,
                                    editable: true,
                                    edittype: "checkbox",
                                    editoptions: {value: "1:0"},
                                    unformat: aceSwitch
                                },
                                {
                                    name: 'recurrenceFactor',
                                    index: 'recurrenceFactor',
                                    width: 90,
                                    sortable: false,
                                    editable: true,
                                    edittype: "select",
                                    editoptions: {value: "1:1;2:2;3:3;5:5"}
                                }
                            ],

                            rownumbers: true,
                            viewrecords: true,
                            rowNum: 30,
                            rowList: [10, 20, 30],
                            pager: pager_selector,
                            altRows: true,
//                            toppager: true,

                            multiselect: false,
                            //multikey: "ctrlKey",
                            multiboxonly: true,

                            loadComplete: function () {
                                var table = this;
                                setTimeout(function () {
                                    styleCheckbox(table);

                                    updateActionIcons(table);
                                    updatePagerIcons(table);
                                    enableTooltips(table);
                                }, 0);
                            },

                            reloadAfterSubmit: false,
                            editurl: "",//nothing is saved
                            caption: "模版列表"

                            //,autowidth: true,
                        });

                        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
                        //enable search/filter toolbar
                        //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
                        //jQuery(grid_selector).filterToolbar({});


                        //switch element when editing inline
                        function aceSwitch(cellvalue, options, cell) {
                            setTimeout(function () {
                                $(cell).find('input[type=checkbox]')
                                        .addClass('ace ace-switch ace-switch-5')
                                        .after('<span class="lbl"></span>');
                            }, 0);
                        }

                        //enable datepicker
                        function pickDate(cellvalue, options, cell) {
                            setTimeout(function () {
                                $(cell).find('input[type=text]')
                                        .datepicker({format: 'yyyy-mm-dd', autoclose: true});
                            }, 0);
                        }

                        //navButtons
                        jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                                { 	//navbar options
                                    edit: false,
                                    editicon: 'ace-icon fa fa-pencil blue',
                                    add: false,
                                    addicon: 'ace-icon fa fa-plus-circle purple',
                                    del: false,
                                    delicon: 'ace-icon fa fa-trash-o red',
                                    search: false,
                                    searchicon: 'ace-icon fa fa-search orange',
                                    refresh: true,
                                    refreshicon: 'ace-icon fa fa-refresh green',
                                    view: false,
                                    viewicon: 'ace-icon fa fa-search-plus grey',
                                },
                                {
                                    //edit record form
                                    //closeAfterEdit: true,
                                    //width: 700,
                                    recreateForm: true,
                                    beforeShowForm: function (e) {
                                        var form = $(e[0]);
                                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                                        style_edit_form(form);
                                    }
                                },
                                {
                                    //new record form
                                    //width: 700,
                                    closeAfterAdd: true,
                                    recreateForm: true,
                                    viewPagerButtons: false,
                                    beforeShowForm: function (e) {
                                        var form = $(e[0]);
                                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                                .wrapInner('<div class="widget-header" />')
                                        style_edit_form(form);
                                    }
                                },
                                {
                                    //delete record form
                                    recreateForm: true,
                                    beforeShowForm: function (e) {
                                        var form = $(e[0]);
                                        if (form.data('styled')) return false;

                                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                                        style_delete_form(form);

                                        form.data('styled', true);
                                    },
                                    onClick: function (e) {
                                        //alert(1);
                                    }
                                },
                                {
                                    //search form
                                    recreateForm: true,
                                    afterShowSearch: function (e) {
                                        var form = $(e[0]);
                                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                                        style_search_form(form);
                                    },
                                    afterRedraw: function () {
                                        style_search_filters($(this));
                                    }
                                    ,
                                    multipleSearch: true,
                                    /**
                                     multipleGroup:true,
                                     showQuery: true
                                     */
                                },
                                {
                                    //view record form
                                    recreateForm: true,
                                    beforeShowForm: function (e) {
                                        var form = $(e[0]);
                                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                                    }
                                }
                        )

                        function style_edit_form(form) {
                            //enable datepicker on "sdate" field and switches for "stock" field
                            form.find('input[name=sdate]').datepicker({format: 'yyyy-mm-dd', autoclose: true})

                            form.find('input[name=isEnabled]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                            //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                            //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                            //update buttons classes
                            var buttons = form.next().find('.EditButton .fm-button');
                            buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                            buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                            buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                            buttons = form.next().find('.navButton a');
                            buttons.find('.ui-icon').hide();
                            buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                            buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
                        }

                        function style_delete_form(form) {
                            var buttons = form.next().find('.EditButton .fm-button');
                            buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                            buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                            buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
                        }

                        function style_search_filters(form) {
                            form.find('.delete-rule').val('X');
                            form.find('.add-rule').addClass('btn btn-xs btn-primary');
                            form.find('.add-group').addClass('btn btn-xs btn-success');
                            form.find('.delete-group').addClass('btn btn-xs btn-danger');
                        }

                        function style_search_form(form) {
                            var dialog = form.closest('.ui-jqdialog');
                            var buttons = dialog.find('.EditTable')
                            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
                        }

                        function beforeDeleteCallback(e) {
                            var form = $(e[0]);
                            if (form.data('styled')) return false;

                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_delete_form(form);

                            form.data('styled', true);
                        }

                        function beforeEditCallback(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        }


                        //it causes some flicker when reloading or navigating grid
                        //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
                        //or go back to default browser checkbox styles for the grid
                        function styleCheckbox(table) {
                            /**
                             $(table).find('input:checkbox').addClass('ace')
                             .wrap('<label />')
                             .after('<span class="lbl align-top" />')


                             $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                             .find('input.cbox[type=checkbox]').addClass('ace')
                             .wrap('<label />').after('<span class="lbl align-top" />');
                             */
                        }


                        //unlike navButtons icons, action icons in rows seem to be hard-coded
                        //you can change them like this in here if you want
                        function updateActionIcons(table) {
                            /**
                             var replacement =
                             {
                                 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                                 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                                 'ui-icon-disk' : 'ace-icon fa fa-check green',
                                 'ui-icon-cancel' : 'ace-icon fa fa-times red'
                             };
                             $(table).find('.ui-pg-div span.ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
        })
                             */
                        }

                        //replace icons with FontAwesome icons like above
                        function updatePagerIcons(table) {
                            var replacement =
                            {
                                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                            };
                            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                                var icon = $(this);
                                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                            })
                        }

                        function enableTooltips(table) {
                            $('.navtable .ui-pg-button').tooltip({container: 'body'});
                            $(table).find('.ui-pg-div').tooltip({container: 'body'});
                        }

                        //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

                        $(document).one('ajaxloadstart.page', function (e) {
                            $.jgrid.gridDestroy(grid_selector);
                            $('.ui-jqdialog').remove();
                        });
                    }
            );
        </script>
    {% endblock %}
